import React,{useEffect,useState} from "react";
import {View,Text,StyleSheet,Image} from "react-native";
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';
import Touchable from '../../components/Touchable';
import {getHeight,getWidth} from "../../utils/index";
import {IGoods} from "../../models/goods";
import { windowWidth } from "@/utils/index";
import AsyncStorage from '@react-native-async-storage/async-storage';
const mapStateToProps = ({goods,users}: RootState) => {
  return {
    currentUser1:users?.user,
    leavedUnuseds: goods?.leavedUnuseds,
  };
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {
  navigation: {navigate: any};
  // route: {params: {selectedId: string}};
  route: any;
}
const GoodsInfo = (props:IProps) => {
  const {leavedUnuseds,route,navigation,currentUser1} = props;
  const [selectGood,setSelectGood] = useState<IGoods>();
  useEffect(()=>{
    if(leavedUnuseds && leavedUnuseds[0].goods && route.params.goods_id){
      leavedUnuseds[0].goods.map(item => {
        console.log("route.params.goods_id",route.params.goods_id)
        if(item.goods_id === route.params.goods_id){
          setSelectGood(item);
          console.log("选中的商品",item);
        }
      });
    }
  },[])
  const handleBuy = async() => {
    console.log("购买");
    // 用户必须登录才能购买
    // const token = await AsyncStorage.getItem('token');
    if(JSON.stringify(currentUser1) !== "[]"){
      navigation.navigate("Order",{
        goods_id:route.params.goods_id
      });
    }else {
      navigation.navigate("Login");
    }
  }
  return (
    <View style={styles.goodsInfo}>
      <View>
        <Image source={{uri:selectGood?.goods_image && selectGood?.goods_image}} style={styles.image}/>
        <Text style={styles.money}>￥{selectGood?.money}</Text>
        <Text style={styles.goodsTitle}>{selectGood?.goods_title}</Text>
      </View>
      <View style={styles.boxTwo}>
        <Text style={styles.TextTwo}>发货地:{selectGood?.goods_place}</Text>
        <Text style={styles.TextTwo}>品牌:{selectGood?.goods_brand}</Text>
      </View>
      <View style={styles.buniness}>
          <Image source={{ uri:selectGood?.buniness.business_scurpture && selectGood?.buniness.business_scurpture}} style={styles.image1}/>
          <View>
            <Text style={styles.buninessText}>{selectGood?.buniness.business_name}</Text>
              <Text style={styles.buninessText}>{selectGood?.buniness.business_introduction}</Text>
          </View>
      </View>
      <Touchable style={styles.buy} onPress={handleBuy}>
        <Text style={styles.buyText}>购买</Text>
      </Touchable>
    </View>
  )
}
const styles = StyleSheet.create({
  goodsInfo:{
    width:windowWidth
  },
  image:{
    width:windowWidth,
    height:250,
  },
  money:{
    fontWeight:"700",
    fontSize:24,
    color:"#A75E5E",
    paddingVertical:10,
    paddingLeft:15
  },
  goodsTitle:{
    paddingLeft:15,
    fontSize:18,
    color:"#999",
  },
  boxTwo:{
    width:windowWidth,
    paddingVertical:15
  },
  TextTwo:{
    textAlign:"center",
    color:"#A75E5E",
    fontSize:18,
  },
  buniness:{
    height:100,
    width:windowWidth,
    display:"flex",
    flexDirection:"row",
    paddingLeft:20,
    alignItems:"center",
  },
  image1:{
    width:80,
    height:80,
    marginRight:10,
    borderRadius:80,
  },
  buninessText:{
    color:"#999",
    fontSize:14,
  },
  buy:{
    width:windowWidth,
    height:60,
    display:"flex",
    justifyContent:"center",
    alignItems:"center",
  },
  buyText:{
    width:getWidth(50),
    height:45,
    lineHeight:45,
    color:"#fff",
    fontSize:20,
    textAlign:"center",
    backgroundColor:"#A75E5E",
    borderRadius:30,
  }
})
export default connector(GoodsInfo);